<template>
	<div>
		<el-form :model="form.editUserInfo" :rules="rules.editUserInfo" ref="form.editUserInfo">
			
			<el-form-item label="角色选择" :label-width="formLabelWidth" prop="roleId">
		      		<el-select placeholder="选择用户角色" v-model="form.editUserInfo.roleId" size="small">
		                <el-option v-for="item in roleList" :label="item.label" :value="item.value" :key="item.value"></el-option>
				    </el-select>
		    </el-form-item>

			<el-form-item label="姓名" :label-width="formLabelWidth" prop="user_name">
		      <el-input v-model="form.editUserInfo.user_name" :label-width="formLabelWidth" placeholder="用户姓名"></el-input>
			</el-form-item>

			<el-form-item label="用户名" :label-width="formLabelWidth" prop="account_name">
		      <el-input v-model="form.editUserInfo.account_name" :label-width="formLabelWidth" placeholder="字母数字下划线组成"></el-input>
			</el-form-item>
		    
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="dialogBtnOk">确 定</el-button>
		  </div>
	</div>
</template>


<script>
import _http from '../common/http.vue'

export default{
	props:['userId','roleList'],
	data(){
		return {
			form:{
				editUserInfo:{
					userId:0,
					roleId:0,
					user_name:'',
					account_name:'',
				}
			},
			rules:{
				editUserInfo:{
					account_name:[
						{required:true,message:'请输入用户名',trigger:'blur'},
						{min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
					],
					roleId:[
						{required:true,message:'请选择角色'}
					],
					user_name:[
						{required:true,message:'用户姓名'}
					]
				}
			},
			formLabelWidth:'120px'
		}
	},
	mounted(){
		this.getUserInfo()
	},
	methods:{
		getUserInfo(){
			_http.axiosRequest(this,'getUserInfo',{id:this.userId},(res)=>{
				this.form.editUserInfo.account_name = res.data.account_name
				this.form.editUserInfo.roleId = res.data.role_id
				this.form.editUserInfo.user_name = res.data.user_name
				this.form.editUserInfo.userId = this.userId
			})
		},
		closeDialog(){
			this.$emit('closeDialog')
		},
		dialogBtnOk(){
			_http.formValidate(this,'form.editUserInfo',(valid)=>{
				if (!valid) {return false}
				
				_http.axiosRequest(this,'editUserInfo',{form:this.form.editUserInfo},(res)=>{
					if(_http.apiResult(this,res.data)){
						this.$emit('freshList')
						this.closeDialog()
					}
				})

			})
		}
	}

}	
</script>